<template>
	<div class="dailishangbaobiao">
		<div class="left">
			<left></left>
		</div>
		<div class="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content">
				<!-- <div class="flex">
					<el-button type="warning" @click="log = true">新建代理商</el-button>
				</div> -->
				<div class="flex" style="font-size: 18px; align-items: center;">
					<div style="margin-right: 20px;">当前总用户数：<span style="color: #f00; font-weight: bold;">{{person.user_count}}</span></div>
					<div style="margin-right: 20px;">当前可提现金额：<span style="color: #f00; font-weight: bold;">￥{{person.price}}</span></div>
					<div><el-button type="warning" @click="tixian">全部提现</el-button></div>
				</div>
				<div class="flex" style="font-size: 14px; color: #666;">
					<div style="margin-right: 20px;">提现账户：{{personall.workNo}}</div>
					<div>所属银行：{{personall.post}}</div>
				</div>
				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column label="月份">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.month }}</span>
							</template>
						</el-table-column>
						<el-table-column label="缴费用户数">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.userCount }}</span>
							</template>
						</el-table-column>
						<el-table-column label="佣金金额">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.price }}</span>
							</template>
						</el-table-column>
						<el-table-column label="提现状态">
							<!-- 0未提 1已提 -->
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.status == 0" >未提现</span>
								<span style="margin-left: 10px" v-if="scope.row.status == 1" >已提现</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="daochu(scope.row.id)">下载明细</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	// import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import bus from '@/assets/bus.js'
	export default {
		name: 'dailishangbaobiao',
		components: {
			left,
			top
		},
		data() {
			return {

				page: 1,
				page_size: 20,
				total: 0,
				
				loading: false,
				tableData: [],
				
				agent_id:"",
				person:"",
				personall:""
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.personall = JSON.parse(localStorage.getItem('person'))
			this.agent_id = JSON.parse(localStorage.getItem('person')).id
			
			this.getlist()
			this.getlist2()
		},
		mounted() {

		},
		methods: {
			daochu: function(id) {
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', this.url + `/work/agentBill/exportXls?id=${id}`);
				a.click();
				// this.axios.get(this.url + `/work/agentBill/exportXls?id=${id}`)
				// 	.then(response => {
				// 		if (response.data.success == true) {
							
				// 		} else {
				// 			if (response.data.code == 401) {
				// 				this.$router.push({
				// 					path: '/login'
				// 				})
				// 			} else {
				// 				this.$message.error(response.data.message);
				// 			}
				// 		}
				// 	})
			},
			tixian:function(){
				this.axios.post(this.url + `/work/agentBill/tiXian?agent_id=${this.agent_id}`)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success('已申请提现');
							this.getlist()
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
					.catch(response => {
						console.log(response)
					});
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist2()
			},
			//获取总数
			getlist: function() {
				this.axios.get(this.url + `/work/agentBill/getAgentMessage?agent_id=${this.agent_id}`)
					.then(response => {
						if (response.data.success == true) {
							this.person = response.data.result
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
					.catch(response => {
						console.log(response)
					});
			},
			//获取列表
			getlist2: function() {
				this.axios.get(this.url + `/work/agentBill/list?pageNo=${this.page}&pageSize=${this.page_size}&agent_id=${this.agent_id}`)
					.then(response => {
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
							this.loading = false
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
					.catch(response => {
						console.log(response)
					});
			},
			
		},

	}
</script>

<style scoped lang="less">
	.dailishangbaobiao {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
